<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><%= live_redirect gettext("Home"), to: "/" %></li>
    <li class="is-active"><%= live_redirect gettext("TeslaFi Import"), to: "" %></li>
  </ul>
</nav>

<div class="container is-flex mb-3" style="align-items: center; justify-content: space-between;">
  <h2 class="title is-4 is-marginless"><%=
    ngettext "Found %{count} file",
             "Found %{count} files",
             length(@status.files),
             count: length(@status.files)
  %></h2>
  <%= link raw("<span class='icon'><span class='mdi mdi-reload'></span></span>"),
           to: "#", type: "button", class: "button is-text is-inverted", phx_click: "reload", disabled: @status.state != :idle %>
</div>

<div class="table-container">
  <table class="table is-narrow is-hoverable is-fullwidth">
    <thead></thead>
    <tbody>
      <%= for %{path: path, date: date, complete: complete} <- @status.files do %>
      <%
        {year, month} =
          with [year, month] <- date,
               month = month |> to_string() |> String.pad_leading(2, "0") do
            {year, month}
          else
            _ -> {"????", "??"}
          end
      %>
      <tr>
        <td style="font-variant-numeric: tabular-nums;"><%= "#{month}/#{year}" %></td>
        <td><%= Path.absname(path) %></td>
        <td class="has-text-centered" style="min-width: 30px;">
          <span class="spinner">
            <%= case {@status.state, complete} do %>
              <% {:running, true}   -> %> <span class='icon has-text-success'><span class='mdi mdi-check-bold'></span></span>
              <% {:running, false}  -> %> <%= content_tag :span, nil, class: "is-loading" %>
              <% {:error, true}     -> %> <span class='icon has-text-success'><span class='mdi mdi-check-bold'></span></span>
              <% {:error, false}    -> %> <span class='icon has-text-danger'><span class='mdi mdi-alert-circle'></span></span>
              <% {:complete, true } -> %> <span class='icon has-text-success'><span class='mdi mdi-check-bold'></span></span>
              <% {:complete, false} -> %> <span class='icon has-text-info'><span class='mdi mdi-debug-step-over'></span></span>
              <% {:idle, _} -> %>
            <% end %>
          </span>
        </td>
      </tr>
      <% end %>
    </tbody>
  </table>
</div>

<%= if @status.state == :idle do %>
<.form let={f} for={@changeset} phx_change="change" phx_submit="import">
  <div class="field mb-6">
    <%= label f, :timezone, gettext("Time zone"), class: "label is-medium " %>
    <div class="control">
      <div class="select is-fullwidth">
        <%= select(f, :timezone, @timezones, disabled: @status.state != :idle) %>
      </div>
    </div>
  </div>

  <div class="field">
    <div class="control">
      <%= submit gettext("Import"),
              class: "button is-success is-fullwidth",
              disabled: !@changeset.valid? or length(@status.files) < 1,
              phx_disable_with: "Saving...",
              phx_loading_class: "is-loading" %>
    </div>
  </div>
</.form>
<% end %>

<%= if @status.state == :error do %>
<code class="box has-text-danger">
  <%= inspect(@status.message, pretty: true) %>
</code>
<% end %>
